<template>
  <div>
    <el-dialog v-model="dialogVisible" title="院内详情" width="500" :before-close="handleClose">
      <div>
        <div class="elderly">
          <div v-for="item in elderlyList" class="box">
            <div>老人:</div>
            <div>{{ item.elderlyName }}</div>
          </div>
        </div>

        <div class="box">
          <div class="titles">精神慰藉内容:</div>
          <div>
            <div class="text" v-html="elderData.content" />
            <div v-html="state.intro" />
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { playGet } from "@/api/care/activity/activity";
import { elderlyData } from "@/api/care/activity/type";
import { ref, defineProps } from "vue";
const dialogVisible = ref(true);

const props = defineProps({ id: Number });
let id = props.id as number;
// 详情
const elderlyList = ref<elderlyData[]>([]);
const elderData = ref({
  content: "",
});
const state = ref({
  intro: "",
});
const getData = async () => {
  let res = await playGet(id);
  elderlyList.value = res.elderly;
  elderData.value = res;

  // 富文本编辑器文本显示
  if (state.value.intro == null) {
    state.value.intro = "";
  }
  if (state.value.intro && state.value.intro.indexOf("<img") != -1) {
    state.value.intro = state.value.intro.replace(
      /<img/g,
      '<img style="max-width:180px;height:auto"'
    );
  }
};

const emit = defineEmits(["itemClose"]);
const handleClose = () => {
  emit("itemClose");
};

onMounted(() => {
  getData();
});
</script>

<style scoped lang="less">
.box {
  display: flex;
  margin-bottom: 18px;

  .text {
    margin-top: -13px;
  }

  div:nth-child(1) {
    width: 140px;
    height: 32px;
    margin-right: 12px;
    font-size: 14px;
  }
}
</style>
